<template>
  <div class="oder_detabox">
    <leftnav></leftnav>
    <div class="content">
      <div class="top_nav">
        <topnav></topnav>
      </div>
      <div class="content_box">
        <div class="jingdu_item">
          <div class="jingdu_header">
            <div class="jingdu_tit">订单进度</div>
            <div class="jingdu_tit2" @click="fanhuifn">返回列表</div>
          </div>
          <div class="jingdu_elment">
            <el-steps :active="oderarr.order_status" align-center>
              <el-step title="订单生成"></el-step>
              <el-step title="订单支付"></el-step>
              <el-step title="商家发货"></el-step>
              <el-step title="买家收货"></el-step>
            </el-steps>
          </div>
        </div>
        <div class="main">
          <div class="main_left">
            <div class="main_left_head">用户信息</div>
            <div class="main_left_content">
              <div class="main_left_idname itps_box">
                <span class="itps_ps">用户昵称:</span>
                <span>{{oderarr.user_name}}</span>
              </div>
              <div class="main_left_img itps_box">
                <span class="itps_ps">用户头像:</span>
                <img :src="oderarr.user_head_image">
              </div>
              <div class="main_left_name itps_box">
                <span class="itps_ps">收货人姓名:</span>
                <span>{{oderarr.user_address_person}}</span>
              </div>
              <div class="main_left_Tel itps_box">
                <span class="itps_ps">收货人电话:</span>
                <span>{{oderarr.user_address_phone}}</span>
              </div>
              <div class="main_left_add itps_box">
                <span class="itps_ps">收货人地址:</span>
                <span>{{oderarr.user_address_detail}}</span>
              </div>
            </div>
          </div>
          <div class="main_right">
            <div class="main_right_head">订单信息</div>
            <div class="main_right_content">
              <div class="main_right_id itps_box">
                <span class="itps_ps">订单编号:</span>
                <span>{{oderarr.order_number}}</span>
              </div>
              <div class="main_right_rmg itps_box">
                <span class="magin itps_ps">订单总价格:</span>
                <span>{{oderarr.order_total_money}}</span>
              </div>
              <div class="main_right_state itps_box">
                <span class="itps_ps">订单状态:</span>
                <span>
                  <span v-if="oderarr.order_status==1">订单生成</span>
                  <span v-if="oderarr.order_status==2">待支付</span>
                  <span v-if="oderarr.order_status==3">待发货</span>
                  <span v-if="oderarr.order_status==4">待收货</span>
                  <span v-if="oderarr.order_status==5">已关闭</span>
                </span>
              </div>
              <div class="main_right_xdTime itps_box">
                <span class="itps_ps">下单时间:</span>
                <span>{{oderarr.order_time}}</span>
              </div>
              <div class="main_right_fhTime itps_box">
                <span class="itps_ps">发货时间:</span>
                <span>{{oderarr.order_accept_time}}</span>
              </div>
              <div class="main_right_wcTime itps_box">
                <span class="itps_ps">订单完成时间:</span>
                <span>{{oderarr.order_complete_time}}</span>
              </div>
              <div class="main_right_ps itps_box">
                <span class="itps_ps">订单备注:</span>
                <span>{{oderarr.order_remarks}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="foot_box">
          <div class="foot_haed">订单商品列表</div>
          <div class="foot_content">
            <div class="foot_itps">
              <div class="foot_tit">商品名称</div>
              <div class="foot_tit">商品图片</div>
              <div class="foot_tit">商品数量</div>
            </div>
            <div class="foot_item" v-for="item in oderarr.order_goods_info">
              <div class="shangPing_name shangping_item">{{item.goods_name}}</div>
              <div class="shangPing_img shangping_item"><img :src="item.goods_image"></div>
              <div class="shangPing_num shangping_item">{{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Leftnav from "../../../../components/nav/leftnav";
    import Topnav from "../../../../components/nav/topnav";
    export default {
        name: "oder_details",
      components: {Topnav, Leftnav},
      data() {
        return {
          orderid:this.$route.query.id,
          oderarr:[],
        }
      },
      methods:{
        fanhuifn() {
          this.$router.push({path:'/oder'})
        },
        getoderDeta() {
          let _this = this
          $.ajax({
            url:this.apis+'/admin/Order/orderDetails',
            data:{
              order_id:this.orderid,
            },
            type:'POST',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              _this.oderarr = res.data
            }
          })
        },
      },
      created() {
          this.getoderDeta()
      },
    }
</script>

<style scoped lang="less">
  .oder_detabox{
    width: 100%;
    min-width: 1350px;
    .content{
      width: 87%;
      margin-left: 200px;
      .content_box{
        width: 100%;
        padding: 1.5%;
        box-sizing: border-box;
        background-color: #f2f2f2;
        .jingdu_item{
          width: 100%;
          background-color: white;
          .jingdu_header{
            display: flex;
            justify-content: space-between;
            padding: 18px 25px;
            border-bottom: 1px solid #EBEEF5;
            .jingdu_tit2{
              color: #409EFF;
              cursor: pointer;
            }
          }
          .jingdu_elment{
            padding: 20px;
          }
        }
        .main{
          width: 100%;
          margin: 15px 0;
          display: flex;
          justify-content: space-between;
          .main_left,.main_right{
            width: 49%;
            background-color: white;
            .main_left_head,.main_right_head{
              padding: 18px 25px;
              border-bottom: 1px solid #EBEEF5;
            }
            .main_left_content,.main_right_content{
              padding:20px 0 20px 40px;
              box-sizing: border-box;
              line-height: 3.2;
              .itps_box{
                .itps_ps{
                  margin-right:20px;
                }
              }
              .main_left_img{
                height: 80px;
                img{
                  width: 80px;
                  height: 80px;
                }
              }
            }
          }
        }
        .foot_box{
          width: 100%;
          background-color: white;
          .foot_haed{
            padding: 18px 25px;
            border-bottom: 1px solid #EBEEF5;
          }
          .foot_content{
            width: 100%;
            padding: 20px;
            .foot_itps,.foot_item{
              display: flex;
              justify-content: space-between;
              padding: 20px;
              box-sizing: border-box;
              border-bottom: 1px solid #EBEEF5;
              .shangPing_name,.shangPing_num{
                padding: 20px 0;
              }
              .shangPing_img{
                img{
                  margin-top: 7px;
                  height: 40px;
                }
              }
              .foot_tit{
                width: 33%;
                color: #909399;
                font-size: 14px;
                font-weight: bold;
              }
              .shangping_item{
                width: 33%;
              }
            }
            .foot_item{
              padding: 0 20px;

            }
          }

        }
      }
    }
  }

</style>
